<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.8.6/dist/css/layui.css" rel="stylesheet">
    <style>
        body{
            background-image: url("../images/9e567d380cd79123c4d03e30a0345982b3b7809c.jpg");
            background-repeat: no-repeat;
            background-size:cover;

        }
    </style>
</head>
<body>
<style>
    .demo-login-container{width: 320px; margin: 21px auto 0;}
    .demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form" method="get" action="${pageContext.request.contextPath}/ServletDemo">
    <div class="demo-login-container">
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" name="name" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" name="pwd" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-xs7">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-cellphone"></i>
                            </div>
                            <input type="text" id="phone" name="name" value="" lay-verify="required|phone" placeholder="手机号" lay-reqtext="请填写手机号" autocomplete="off" class="layui-input" id="reg-cellphone">
                        </div>
                    </div>
                    <div class="layui-col-xs5">
                        <div style="margin-left: 11px;">
                        <button type="button" id="btt" class="layui-btn layui-btn-fluid layui-btn-primary" lay-on="reg-get-vercode">获取验证码</button></a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-form-item">
            <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
            <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
        </div>
        <div class="layui-form-item demo-login-other">
            <label>社交账号登录</label>
            <span style="padding: 0 21px 0 6px;">
        <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
      </span>
             <a href="${pageContext.request.contextPath}/t163demo/register.jsp">注册帐号</a>
             <a href="${pageContext.request.contextPath}/t163demo/rl.jsp">人脸登录</a>
        </div>
    </div>
</form>
<p style="color: red;margin: auto;width: 200px"><%=request.getParameter("load")==null?"":"账号或者密码错误"%></p>
<p style="color: red;margin: auto;width: 200px"><%=request.getParameter("register1")==null?"":"注册成功请立即登录"%></p>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.8.6/dist/layui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

    $("#btt").click(function () {
     // alert($("#phone").val()) ;
      //手机号码合不合格
        $.getJSON("${pageContext.request.contextPath}/Testphone?phone="+$("#phone").val(),function (data) {

                alert("手机验证码发送个成功");

        });
    });

    layui.use(function(){
        var form = layui.form;
        var layer = layui.layer;
        // 提交事件
        form.on('submit(demo-login)', function(data){
            var field = data.field; // 获取表单字段值
            // 显示填写结果，仅作演示用
            // layer.alert(JSON.stringify(field), {
            //     title: '当前填写的字段值'
            // });
            // 此处可执行 Ajax 等操作
            // …
            // return false; // 阻止默认 form 跳转
            //reg-get-vercode
            util.on('reg-get-vercode', {
                // 获取验证码
                'reg-get-vercode': function(othis){
                    var isvalid = form.validate('#reg-cellphone'); // 主动触发验证，v2.7.0 新增
                    // 验证通过
                    if(isvalid){
                        layer.msg('手机号规则验证通过');
                        // 此处可继续书写「发送验证码」等后续逻辑
                        // …
                    }
                }
            });
            util.on('lay-on', {
                // 获取验证码
                'reg-get-vercode': function(othis){
                    var isvalid = form.validate('#reg-cellphone'); // 主动触发验证，v2.7.0 新增
                    // 验证通过
                    if(isvalid){
                        layer.msg('手机号规则验证通过');
                        // 此处可继续书写「发送验证码」等后续逻辑
                        // …
                    }
                }
            });
        });
    });
</script>
</body>
</html>
